<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.css">
</head>
<body>
    <div class="index-container">
        <div class="index-header">
            <div class="newWorld"><img src="./images/index-book.png" alt="" class="newBook"><span>新世界</span></div>
            <ul class="index-nav">
                <li><a href="javascript:;">首页</a></li>
                <li><a href="javascript:;">最新活动</a></li>
                <li><a href="javascript:;">项目介绍</a></li>
                <li><a href="javascript:;">爱心社区</a></li>
                <li><a href="javascript:;">关于我们</a></li>
                <li><a href="javascript:;"><img src="./images/index-login.png" alt=""><span style="color:#e74f4d">&nbsp;&nbsp;登录</span></a></li>
            </ul> 
        </div>
        <div class="index-banner">
            <h1>Time of new life</h1>
            <p>新时代，年轻的人们让我们一起<br>体验新生活，享受新生活</p>
            <a href="javascript:;">开始体验</a>
        </div>
        <ul class="content-nav">
            <li><img src="./images/index-nav1.png" alt=""></li>
            <li><img src="./images/index-nav2.png" alt=""></li>
            <li><img src="./images/index-nav3.png" alt=""></li>
            <li><img src="./images/index-nav4.png" alt=""></li>
        </ul>
        <ul class="content-info">
            <li>打造全新世界观，让你更爱你的生活</li>
            <li>丰富多彩的公益活动，发挥新世界的主人公意识</li>
            <li>时尚的新理念，超前体验未知的生活</li>
            <li>完善的培养机制，培养你全新的世界观</li>
        </ul>
        <div class="content-unknow">
            <img src="./images/index-bookBig.png" alt="">
            <p>关于新世界，你不知道的还有什么？</p>
        </div>
        <div class="content-search">
            <p>查找新世界城市活动信息</p>
            <hr style="width:32px;margin:10px auto;box-sizing:border-box;border-top:#fff solid 2px;">
            <span>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</span>
            <div class="location">
                <div>
                    <ul>
                        <li class="location-selected" id="img1"><span class="location-name g">国家</span><img src="./images/select-down.png" alt="" class="location-img"></li>
                        <li class="not-selected v1"><img src="./images/selected.png" class="selected"/>中国</li>
                        <li class="not-selected v1"><img src="./images/selected.png" class="selected"/>美国</li>
                        <li class="not-selected v1"><img src="./images/selected.png" class="selected"/>法国</li>
                        <li class="not-selected v1"><img src="./images/selected.png" class="selected"/>英国</li>
                    </ul>
                </div>
                <div>
                     <ul>
                        <li class="location-selected" id="img2"><span class="location-name s">省份</span><img src="./images/select-down.png" alt="" class="location-img"></li>
                        <li class="not-selected v2"><img src="./images/selected.png" class="selected"/>北京市</li>
                        <li class="not-selected v2"><img src="./images/selected.png" class="selected"/>天津市</li>
                        <li class="not-selected v2"><img src="./images/selected.png" class="selected"/>河北省</li>
                        <li class="not-selected v2"><img src="./images/selected.png" class="selected"/>陕西省</li>
                        <li class="not-selected v2"><img src="./images/selected.png" class="selected"/>内蒙古自治区</li>
                        <li class="not-selected v2"><img src="./images/selected.png" class="selected"/>辽宁省</li>
                     </ul>
                </div>
                <div>
                     <ul>
                        <li class="location-selected" id="img3"><span class="location-name c">城市</span><img src="./images/select-down.png" alt="" class="location-img"></li>
                        <li class="not-selected v3"><img src="./images/selected.png" class="selected"/>北京市</li>
                        <li class="not-selected v3"><img src="./images/selected.png" class="selected"/>天津市</li>
                        <li class="not-selected v3"><img src="./images/selected.png" class="selected"/>石家庄</li>
                     </ul>
                </div>
                <div style="margin-right:0;"><input type="button" value="搜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;索"></div>
            </div>
        </div>
        <div class="content-gallery">
            <div class="g-center">
                <div class="gallery-img"><img src="./images/gallery-img1.png" alt=""><div class="activity"><h3>北京活动</h3><p>新社区大联盟</p></div></div>
                <div class="gallery-img"><div class="activity"><h2><span>上</span><span>海</span><span>活</span><span style="margin-right:0;">动</span></h2><p style="line-height:24px;margin-bottom:3px;">夜上海新景观探索</p></div><img src="./images/gallery-img2.png" alt=""></div>
                <div class="gallery-img"><img src="./images/gallery-img3.png" alt=""><div class="activity"><h3>深圳活动</h3><p>全新海岸线观点站</p></div></div>
                <div class="gallery-img" style="margin-right:0;"><img src="./images/gallery-img4.png" alt=""><div class="activity"><h3>香港活动</h3><p>奢侈消费大派送</p></div></div>
            </div>
        </div>
        <div class="content-time">
            <div class="time1-1"><p class="p1">新世界</p><span class="p2">TIME</span><p class="p3">@新世界－北京</p><p class="p3">2016.04.01</p></div>
            <div class="time1-2">
                    <!-- 轮播 -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <p class="time1-2-t" style="margin-bottom:30px;">新世界/<span style="color:#e74f4d;">01</span></p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-left: 72px;font-size: 12px;text-align: left;">新世界是个新世界新世界是个新世界</p>
                                <a href="javascript:;">更多详情</a>
                            </div>
                            <div class="swiper-slide">
                                <p class="time1-2-t" style="margin-bottom:30px;">新世界/<span style="color:#e74f4d;">02</span></p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-left: 72px;font-size: 12px;text-align: left;">新世界是个新世界新世界是个新世界</p>
                                <a href="javascript:;">更多详情</a>    
                            </div>
                            <div class="swiper-slide">
                                <p class="time1-2-t" style="margin-bottom:30px;">新世界/<span style="color:#e74f4d;">03</span></p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-bottom:20px;font-size: 12px;">新世界是个新世界新世界是个新世界新世界是个新世界</p>
                                <p style="margin-left: 72px;font-size: 12px;text-align: left;">新世界是个新世界新世界是个新世界</p>
                                <a href="javascript:;">更多详情</a>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
    
                    </div>
                </div>
        </div>
        
        <div class="content-threepic">
            <div class="threepic2-1" style="background-color: #e74f4d;"><p>新时代</p><p>关于爱生活的我们</p><hr style="width:32px;margin:26px auto;box-sizing:border-box;border-top:#fff solid 2px;"><a href="javascript:;">查看更多</a></div>
            <div class="threepic2-2" style="color:#000;"><p>新时代</p><p>关于爱生活的我们</p><hr style="width:32px;margin:26px auto;box-sizing:border-box;border-top:#000 solid 2px;"><a href="javascript:;">查看更多</a></div>
            <div class="threepic2-3"></div>
        </div>
        <div class="content-volunteer">
            <div class="be-volunteer">
                <p style="padding-top:116px;">成为我们的志愿者</p>
                <hr style="width:32px;margin:10px auto 26px;box-sizing:border-box;border-top:#e74f4d solid 2px;">
                <p style="font-size:12px;color:#aaa;font-weight: 200;">新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
            </div>
            <div class="be-more">
                <div class="more1">
                    <h6>新世界志愿者协议</h6>
                    <p>加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法规，并且本着平等资源的原则 ......</p>
                    <a href="javascript:;"><img src="./images/more.png">&nbsp;more</a>
                    <h6>新世界志愿者权利</h6>
                    <p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在四新世界活动的优先参与资格</p>
                    <a href="javascript:;"><img src="./images/more.png">&nbsp;more</a>
                    <h6 style="margin-bottom:0;">更多条款</h6>
                    <a href="javascript:;"><img src="./images/more.png">&nbsp;more</a>
                </div>
                <div class="more-info">
                    <ul>
                        <li class="info1">姓名：<input type="text"/></li>
                        <li class="info1" style="margin-right: 0;">年龄：<input type="text"/></li>
                        <li class="info1">联系方式：<input type="text" /></li>
                        <li class="info1" style="margin-right: 0;">联系地址：<input type="text"/></li>
                        <li class="info2">请简单描述您梦想的生活：<textarea></textarea></li>
                        <li class="info3"><input type="submit" value="提交申请" /></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="index-footer">
            <div class="footer-contact">
                <p class="footer-contact-p1">联系我们</p>
                <p class="footer-contact-p2">为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br>也可以通过以下任何方式关注我们动态</p>
                <input class="input-text" type="text" value="someone@email.com" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999999"><input class="input-submit" type="button" value="提交">
                <ul>
                    <li><img src="./images/footer-logo1.png" alt=""></li>
                    <li><img src="./images/footer-logo2.png" alt=""></li>
                    <li><img src="./images/footer-logo3.png" alt=""></li>
                    <li><img src="./images/footer-logo4.png" alt=""></li>
                </ul>
            </div>
            <div class="footer-bg">
                <span>@2016新世界</span>
                <a href="#top">Back to top</a>
            </div>
        </div>
    </div>
    
    <script src="./js/swiper.js"></script>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
            // swiper-js
        var mySwiper = new Swiper ('.swiper-container', {
                loop: true,
                autoplay: false,
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                }
            })

            // 下拉框
            var img1 = 0;
        $("#img1").click(function(){
            if(img1 == 0){
                $(".v1").css("display","inline-block");
                $(".v2").css("display","none");
                $(".v3").css("display","none");
                img1 = 1;img3 = 0;img2 = 0;
            }else{
                $(".v1").css("display","none");
                img1 = 0;
            }
        })
        var img2 = 0;
        $("#img2").click(function(){
            if(img2 == 0){
                $(".v2").css("display","inline-block");
                $(".v1").css("display","none");
                $(".v3").css("display","none");
                img2 = 1;img1 = 0;img3 = 0;
            }else{
                $(".v2").css("display","none");
                img2 = 0;
            }
        })
        var img3 = 0;
        $("#img3").click(function(){
            if(img3 == 0){
                $(".v3").css("display","inline-block");
                $(".v1").css("display","none");
                $(".v2").css("display","none");
                img3 = 1;img2 = 0;img1 = 0;
            }else{
                $(".v3").css("display","none");
                img3 = 0;
            }
        })
        // 替换文字
        $(".location>div>ul>li.v1").click(function(){
            $(".v1").css("display","none");
            img1 = 0;
            $(".g").text($(this).text());
        })
        $(".location>div>ul>li.v2").click(function(){
            $(".v2").css("display","none");
            img2 = 0;
            $(".s").text($(this).text());
        })
        $(".location>div>ul>li.v3").click(function(){
            $(".v3").css("display","none");
            img3 = 0;
            $(".c").text($(this).text());
        })
        
    
        </script>
</body>
</html>